<template>
  <div class="campUniformRanking">
    <GdwyyAppBigTitle icon="zl/icon_fz" :time="queryParam.dayId" :title="queryParam.gridName"></GdwyyAppBigTitle>
    <Search ref="SearchRef" @changeForm="handlechangeForm" class="search-box"></Search>
    <van-loading v-if="loading" type="spinner" color="#1989fa" />
    <div class="main block-pd" v-else>
      <a-table
        :columns="tableColumns"
        :data-source="tableData"
        :bordered="true"
        :pagination="false"
        size="small"
        :scroll="{ x: 300, y: 500 }"
      >
        <template slot="PM" slot-scope="text, record, rowIndex">
          <span v-if="text === 1">
            <img class="pm-icon" src="~@assets/imgs/reconsitution/zl/icon_fir@2x.png" alt="" />
          </span>
          <span v-else-if="text === 2">
            <img class="pm-icon" src="~@assets/imgs/reconsitution/zl/icon_sec@2x.png" alt="" />
          </span>
          <span v-else-if="text === 3">
            <img class="pm-icon" src="~@assets/imgs/reconsitution/zl/icon_thi@2x.png" alt="" />
          </span>
          <span v-else>
            {{ text }}
          </span>
        </template>
        <template slot="ZYX" slot-scope="text">
          <span class="zyx-box" v-if="text == 0">全部</span>
          <span class="zyx-box" v-if="text == 1">营业线</span>
          <span class="zyx-box" v-if="text == 2">社渠线</span>
          <span class="zyx-box" v-if="text == 3">智家线</span>
        </template>
      </a-table>
    </div>
  </div>
</template>
    
    <script>
import { GdwyyAppBigTitle } from '@/components/reconsitution/index.js'
import Search from './components/search.vue'
import { detailTableColumns } from './common'
import { parseResultAction } from '@/api/manage'

export default {
  name: 'campUniformRanking',
  components: { GdwyyAppBigTitle, Search },
  data() {
    return {
      loading: false,
      pagination: {
        position: 'bottom',
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          return ' 共' + total + '条'
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0,
      },
      tableColumns: detailTableColumns,
      tableData: [],
      queryParam: {},
    }
  },

  created() {
    this.queryParam = JSON.parse(this.$route.query.queryParam)
    this.$nextTick(() => {
      const { marketType, kpiCode } = this.queryParam
      this.$refs.SearchRef.getKpiCodeList({
        marketType,
        kpiCode,
      })
    })
    this.requestApi()
  },

  methods: {
    async requestApi(data) {
      this.loading = true
      this.tableData = []
      const { success, result } = await parseResultAction('8a31cdd68a7e768a018ac2990ea80015', {
        ...this.queryParam,
        pageNum: this.pagination.current,
        pageSize: this.pagination.pageSize,
      })
      success && (this.tableData = result)
      this.loading = false
    },
    handlechangeForm({ code, type }) {
      this.queryParam[type] = code
      this.requestApi()
    },
  },
}
</script>
    
    <style lang="less" scoped>
@import '~@assets/less/reconsitution/common.less';
.campUniformRanking {
  background: #fff;
  margin-top: 3.2vw;

  .search-box {
    margin-top: 5.3333vw;
  }
  .zyx-box {
    background: #eefffa;
    border: 0.2667vw solid rgba(34, 172, 134, 0.5);
    border-radius: 1.0667vw;
    // width: 2.9167vw;
    // height: 1.0417vw;
    padding: 1.0667vw 2.1333vw;
    line-height: 3.2vw;
    font-size: 3.2vw;
    color: #22ac86;
    display: inline-block;
  }
  .pm-icon {
    width: 4.8vw;
    height: 4.8vw;
  }
}
</style>